<template>
	<view>
		<view class="modal-body" :class="{'modal-active' : animation}">
			<view class="ss-modal">
				<view class="digital-text-modal">
					<view class="dk-title">请输入支付密码</view>
					<view class="pwd-box clearfix">
						<view class="pwd-text" v-for="(item,index) in 6" :key="index" :data-index="index" :class="{active:(activeInput == index)}">{{payPassWord[index]}}</view>
					</view>
				</view>
				
				<view class="keyboard-modal">
					<view class="keyboard keyboard-show">
						<view class="key-box clearfix">
							<view class="num" v-for="item in digitalList" :key="item" :class="{'no-num':(item === '' || item === '-1')}"
							 @click="getKeyNumber(item)">{{item}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="mask" class="uni-mask" @touchmove.stop.prevent="false" catchtouchmove="true" @click.stop="hide()"></view>
		</view>
	</view>
</template>

<script setup>
	import { computed,ref, defineExpose } from "vue";
	
	const emit = defineEmits(["submit","cancel"]);
	const animation = ref(false)
	const mask = ref(false)
	const activeInput = ref(0)
	const digitalList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'])
	const paymentPwd = ref('')
	
	const payPassWord = computed(()=>{
		var payPassWord = paymentPwd.value.split('') || [];
		payPassWord.fill('*');
		return payPassWord;
	})
	
	const show = () => {
		animation.value = true;
		return true;
	}
	
	const hide = ()=> {
		animation.value = false;
		return false;
	}
	
	const toggle = () => {
		return !animation.value ? show() : hide()
	}
	
	const cancel = () => {
		emit('cancel');
	}
	
	const submit = (clickFlag) => {
		emit('submit', {
			value: paymentPwd.value
		});
		paymentPwd.value = '';
		activeInput.value = 0;
		hide();
	}
	
	const getKeyNumber = (val) => {
		let paymentPwdArr = paymentPwd.value.split('');
		if (val === '' || (val != -1 && paymentPwdArr.length === 6)) {
			if(paymentPwdArr.length === 6){
				submit();
				return ;
			}
			return false;
		} else if (val != -1) { //数字输入
			paymentPwdArr.splice(activeInput.value, 0, val);
			activeInput.value++;
			paymentPwd.value = paymentPwdArr.join('');
			if(paymentPwdArr.length === 6){
				submit();
				return ;
			}
		} else { //删除
			if (activeInput.value >= 0) {
				activeInput.value !== 0 && activeInput.value--;
				paymentPwdArr.splice(activeInput.value - 1, 1);
				paymentPwd.value = paymentPwdArr.join('');
			}
		}
	}
	defineExpose({show})
	
</script>

<style lang="scss">
	.digital-text-modal{
		position:fixed;
		z-index:2;
		transition:inherit;
		width: calc(100% - 100rpx);
		height: 300rpx;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		padding-padding: 0;
		padding-padding: constant(safe-area-inset-top);
		padding-padding: env(safe-area-inset-top);
		border-radius: 10rpx;
		
		.dk-title {
			font-size: 36rpx;
			font-weight: 800;
			color: #000;
			line-height: 90rpx;
			text-align: center;
		}
		
		.pwd-box {
			padding-left:10rpx;
			position: relative;
			text-align: center;
		}

		.pwd-text {
			position: relative;
			line-height:110rpx;
			vertical-align: middle;
			text-align: center;
			font-size:50rpx;
			font-weight: bold;
			width:92rpx;
			height:92rpx;
			margin-right:10rpx;
			border-radius:10rpx;
			display: inline-block;
			box-shadow: 0 0 0 2rpx #ccc;
			overflow: hidden;
		}

		.pwd-text.active:after {
			-webkit-animation: twinkle 1s infinite;
			animation: twinkle 1s infinite;
			height: 70%;
			width: 4rpx;
			content: '';
			position: absolute;
			top: 15%;
			left: 50%;
			margin-left: -2rpx;
			background-color: #4fa5e1;
		}
		
		@keyframes twinkle {
			from {
				background-color: #4fa5e1;
			}

			to {
				background-color: transparent;
			}
		}
	}
	
	.keyboard-modal{
		position:fixed;
		z-index:2;
		transition:inherit;
		width: calc(100% + 3px);
		height: 420rpx;
		bottom: 0;
		left: 0;
		transform: translate(0, 0);
		background-color: #fff;
		padding-padding: 0;
		padding-padding: constant(safe-area-inset-top);
		padding-padding: env(safe-area-inset-top);
		
		.keyboard{
			box-shadow: 0 -1rpx 0 3rpx #eee;
			width: 100%;
			transition: all .2s linear;
			transform: translateY(100%);
		}
		
		/* 键盘 */
		.key-box {
			box-shadow: 0 0 0 2rpx #eee;
			position: relative;
			overflow: hidden;
			width: 100%;
			margin-top: 20rpx;
		}
		
		.keyboard-show{
			transform: translateY(0);
		}
	
		.num {
			transition: all .2s linear;
			float: left;
			background-color:#fff;
			box-shadow:0 0 0 2rpx #eee;
			width: 33.33333333%;
			cursor:pointer;
			height: 100rpx;
			text-align: center;
			color: #333;
			line-height: 100rpx;
			font-size:50rpx;
			font-weight:500;
			position: relative;
			overflow: hidden;
			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				//设置径向渐变
				background-image: radial-gradient(circle, rgba(0, 0, 0, .65) 20%, transparent 20%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(5);
				opacity: 0;
				transition: transform .2s ease-in-out, opacity .3s ease-in-out;
			}
			&:active:after {
			    //transform: scale(0);
			    opacity: .2;
			    //设置初始状态
			    transition: 0s;
			}
		}
	
		.num:nth-of-type(3n+1) {
			border-bottom: 0;
			border-left: 0;
		}
	
		.num:nth-of-type(3n+2) {
			border-bottom: 0;
			border-left: 0;
			border-right: 0;
		}
	
		.num.no-num {
			background-color: #f2f2f2;
			font-size: 0;
		}
		
		.num:last-child {
			background: #f2f2f2 url() center center / auto 50rpx no-repeat;
		}
	}
	
	.modal-body{
		background-color: #0000008f;
		box-sizing: border-box;
		opacity: 0;
		position: fixed;
		top:0px;
		bottom:0px;
		left: 0;
		width: 100%;
		pointer-events: none;
		transform: translateX(0);
		transition: all .2s linear;
		z-index: 98;
		&.modal-active{
			pointer-events: auto;
			opacity: 1;
		}
	}
		
	.modal-body .uni-mask{
		z-index: 1;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0,0,0,.6);
	}
	.modal-body{
		opacity: 0;
		pointer-events: none;
	}
	.modal-active{
		opacity: 1;
		pointer-events: auto;
	}
</style>